<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Overlay } from "vant";
import { useI18n } from "vue-i18n";
import { HomeAxios } from "@/api";
import { UserStore } from "@/store";
import { FiltrationFun } from "@/utils";
import { InstallGuideConfigInterval } from "@/constant";
import OverlayDownPwaApk from "@/components/DownPwaAndApk/overlayDownPwaApk.vue";
import moment from "moment";
const userStore = UserStore();
const { t } = useI18n();
const emits = defineEmits(["openFirstAid"]);
const overlayShow = ref(false);
const clotureFun = () => {
  overlayShow.value = false;
};
const props = defineProps({
  advid: {
    type: String,
    default: "",
  },
});
//下载框的弹窗类型2是新的 1是旧的.都用新的
const donwType = ref(2);
onMounted(() => {
  if (FiltrationFun.detectEnvironment() !== "pwa") {
    const timeIntervalType = sessionStorage.getItem("timeInterval")
      ? JSON.parse(sessionStorage.getItem("timeInterval") as string)
      : "";
    if (timeIntervalType !== "") {
      const getTime = moment().format("YYYY-MM-DD HH:mm:ss");
      const timeInter = moment(timeIntervalType.time, "YYYY-MM-DD HH:mm:ss");
      const timeDifference = timeInter.diff(getTime, "hours");
      if (timeIntervalType.time > 0 && timeDifference >= timeIntervalType.time) {
        getInstallGuideConfig();
      }
    } else {
      getInstallGuideConfig();
    }
  } else {
    overlayShow.value = false;
  }
});
//数据
const configData = ref({
  androidInstallType: 1, //安卓弹框安装类型 1=pwa(快捷安装) 2=apk(需自己安装) 3=pwa(优先)+apk 1
  apkUrl: "", //       1
  content: 1, //弹框内容 1=常规升级 2=赠送彩金升级   1
  installGiftMoney: 0, //赠送金额1
  installGiftSwitch: 0, //充值用户安装pwa/apk后赠送开关 0=关闭 1=开启1
  installSwitch: 0, //弹框引导安装开关 0=关闭 1=开启
  iosInstallType: 0, //苹果弹框安装类型 1=添加到桌面 2=苹果AppStore1
  launchTime: 1, //弹框时间点 1-访问主页 2-用户入金后 1
  needDama: 0, //要求打码量1
  showGiftMoney: 0, //\显示赠送金额
  timeInterval: 0, //弹框时间间隔 以小时为单位 0到24小时 1
  appStoreUrl: "", //苹果商店地址
});
//获取安装引导配置
const getInstallGuideConfig = () => {
  //盘点h5页面
  //   if(FiltrationFun.detectEnvironment()==="Browser"){
  //先要盘点平台 是不是pwa 或者apk
  const uid = userStore.userLoginInfo.account.uid;
  HomeAxios.getInstallGuideConfig({ advStr: props.advid, uid: uid }).then(res => {
    //根据先判断渠道商还是总平台,props.advid==""就是总平台
    if (props.advid !== "") {
      //渠道商的
      //弹框引导安装开关
      if (res.list[1]) {
        configData.value.installSwitch = Number(res.list[1].Value);
      }
      ///弹框内容 1=常规升级 2=赠送彩金升级
      if (res.list[2]) {
        configData.value.content = Number(res.list[2].Value);
      }
      //弹框时间点
      if (res.list[3]) {
        configData.value.launchTime = Number(res.list[3].Value);
      }
      //弹框时间间隔
      if (res.list[4]) {
        configData.value.timeInterval = Number(res.list[4].Value);
      }
      //苹果弹框安装类型
      if (res.list[5]) {
        configData.value.iosInstallType = Number(res.list[5].Value);
      }
      //安卓弹框安装类型
      if (res.list[7]) {
        configData.value.androidInstallType = Number(res.list[7].Value);
      }
      //充值用户安装pwa/apk后赠送
      if (res.list[8]) {
        configData.value.installGiftSwitch = Number(res.list[8].Value);
      }
      //赠送金额
      if (res.list[9]) {
        configData.value.installGiftMoney = Number(res.list[9].Value);
      }
      //下载的akpURL
      if (res.list[10]) {
        configData.value.apkUrl = res.list[10].Value;
      }
      //要求打码
      if (res.list[11]) {
        configData.value.needDama = Number(res.list[11].Value);
      }
    } else {
      //总平台数据777ssss
      configData.value = res.conf;
      if (configData.value.timeInterval > 0) {
        InstallGuideConfigInterval.interval = setInterval(() => {
          getInstallGuideConfig();
        }, configData.value.timeInterval * 60 * 60 * 100);
      } else {
        clearInterval(InstallGuideConfigInterval.interval);
        InstallGuideConfigInterval.interval = null;
      }
    }
    const timeIntervalType = {
      timeInterval: configData.value.timeInterval,
      time: moment().format("YYYY-MM-DD HH:mm:ss"),
    };
    sessionStorage.setItem("timeInterval", JSON.stringify(timeIntervalType));
    overlayShow.value = res.conf.installSwitch == 1 ? true : false;
  });
  //}
};
//关闭的弹窗的
const switchgear = () => {
  if (configData.value.installSwitch === 1) {
    overlayShow.value = false;
  }
};
const iosOverlayShow = ref(false);
const DownPwaAndApkRef = ref();
//点击下载
const setDown = () => {
  //先判断ios还是Android
  if (FiltrationFun.getDeviceType() === "iOS") {
    //ios,iosInstallType：1添加在桌面，2打开苹果商店
    if (configData.value.iosInstallType === 1) {
      iosOverlayShow.value = true;
    } else {
      window.location.href = configData.value.appStoreUrl;
    }
  } else {
    //Android的安卓弹框安装类型 1=pwa(快捷安装) 2=apk(需自己安装) 3=pwa(优先)+apk
    DownPwaAndApkRef.value.closefun();
  }
};
</script>
<template>
  <!-- 下载应用弹窗 -->
  <Overlay :show="overlayShow" z-index="300" style="background-color: #00000073">
    <div class="Overlay-frame" v-if="donwType === 1">
      <div class="background-div"></div>
      <div class="donw-frame" @click.stop>
        <div class="donw-content-framge">
          <img class="update-img" src="@/image/new_img/home/update_bg_ios.png" />
          <div class="donw-content">
            <div class="close-chat-frame df ai-center">
              <div
                class="close-frame df ai-center jc-center"
                @click="
                  () => {
                    emits('openFirstAid');
                  }
                "
              >
                <img class="kefu2-caise-img" src="@/image/new_img/home/kefu2_caise.png" />
              </div>

              <div class="close-content-frame df ai-center jc-center">
                <div class="close-frame df ai-center jc-center">
                  <img src="@/image/new_img/home/cs_close.png" @click="clotureFun" />
                </div>
              </div>
            </div>
            <div class="title-frame">
              <div class="title-content df">
                <img class="app-img" src="@/image/new_img/home/logo2.png" />
                <div class="right-frame">
                  <div class="span1">br11.com</div>
                  <div class="span2">
                    {{ t("home.donwNodeTitle") }}
                  </div>
                </div>
              </div>
              <div class="title2-frame">
                <div class="donwTitle">{{ t("home.donwTitle") }}</div>
              </div>
              <div class="content-list">
                <div class="content-text-frame df jc-center ai-center">
                  <img class="coin-img" src="@/image/new_img/home/update_coin.png" />
                  <div class="content-text">
                    {{ t("home.donwContent1") }}
                  </div>
                </div>
                <div class="content-text-frame df jc-center ai-center">
                  <img class="coin-img" src="@/image/new_img/home/update_coin.png" />
                  <div class="content-text">
                    {{ t("home.donwContent2") }}
                  </div>
                </div>
                <div class="content-text-frame df jc-center ai-center">
                  <img class="coin-img" src="@/image/new_img/home/update_coin.png" />
                  <div class="content-text">
                    {{ t("home.donwContent3") }}
                  </div>
                </div>
                <div class="content-text-frame df jc-center">
                  <div class="content-text">
                    {{ t("home.donwContent4") }}
                  </div>
                </div>
                <div class="donw-div-button-frame df jc-center ai-center">
                  <img class="shandian-img" src="@/image/new_img/home/shandian_bai.svg" />
                  <div class="buttomText-frame">{{ t("home.buttomText") }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Overlay-frame" v-if="donwType === 2">
      <div class="donwType-frame" @click.stop>
        <img class="banner-img" src="@/image/new_img/home/pwa_update_banner.png" />
        <div class="detail-frame">
          <img class="back-img" src="@/image/new_img/home/pwa_update_background1.png" />
          <div class="detail-content-frame df ai-center jc-center">
            {{ t("home.donwType2Detail") }}
          </div>
        </div>
        <div class="incentivos-frame df ai-center jc-center" v-if="configData.content === 2">
          <img class="meiyuan-frame" src="@/image/new_img/home/meiyuan_hui.png" />
          <div class="bonus-text">
            {{ t("systemNotify.bonus") }}
          </div>
          <div class="money-huhao">{{ t("currencyType.pt") }} {{ configData.showGiftMoney }}</div>
        </div>
        <div class="button-frame df ai-center jc-space-between">
          <div class="button-left-frame df ai-center jc-center" @click="setDown()">
            <img class="shandian-img" src="@/image/new_img/home/shandian_bai.svg" />
            <div class="buttomText-frame">{{ t("home.buttomText") }}</div>
          </div>
          <div
            class="fpwa-frame df ai-center jc-center"
            @click="
              () => {
                emits('openFirstAid');
              }
            "
          >
            <img class="fpwa-cs" src="@/image/new_img/home/kefu2_bai.svg" />
          </div>
        </div>
        <img
          v-if="configData.installSwitch == 1"
          class="Closeb-img"
          src="@/image/new_img/home/Close_bai.png"
          @click="switchgear()"
        />
      </div>
      <Overlay
        :show="iosOverlayShow"
        z-index="310"
        style="background-color: #00000073"
        @click.stop="iosOverlayShow = false"
      >
        <div class="donwPwa-frame">
          <div class="cloture-frame"></div>
          <img class="hometips-img" src="@/image/new_img/hometips_tips3.png" />
        </div>
      </Overlay>
    </div>
    <!-- 下载弹框 -->
    <OverlayDownPwaApk
      ref="DownPwaAndApkRef"
      :apkUrl="configData.apkUrl"
      :androidInstallType="configData.androidInstallType"
    />
  </Overlay>
</template>
<style lang="less" scoped>
.Overlay-frame {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  .background-div {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .donw-frame {
    width: 100%;
    height: 788px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    .donw-content-framge {
      width: 100%;
      height: 100%;
      position: relative;
      left: 0;
      top: 0;
      .update-img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
    }
    .donw-content {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 15;
      width: 100%;
      height: 100%;
    }
    .close-chat-frame {
      position: absolute;
      right: 22px;
      top: 10px;
      z-index: 21;
      width: auto;
      height: auto;
      .close-content-frame {
        width: 100px;
        height: 100px;
        .close-frame {
          margin-left: 0px;
        }
      }

      .close-frame {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ffffff40;
        margin-left: 30px;
        img {
          width: 100%;
          height: 100%;
        }
        .kefu2-caise-img {
          width: 34px;
          height: 34px;
        }
      }
      .chat-frame {
        width: 50px;
        height: 50px;
        margin-right: 33px;
      }
    }
    .title-frame {
      width: 674px;
      height: auto;
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      z-index: 20;
      margin: auto;
      .title-content {
        width: 100%;
        height: auto;
        .app-img {
          width: 132px;
          height: 132px;
          border-radius: 20px;
        }
        .right-frame {
          width: auto;
          height: auto;
          margin-left: 20px;
          .span1 {
            color: #ffffff;
            font-size: 40px;
            font-weight: 500;
          }
          .span2 {
            color: #ffffffa6;
            font-size: 24px;
            line-height: 36px;
            margin-top: 10px;
          }
        }
      }
      .title2-frame {
        width: 100%;
        height: auto;
        margin: auto;
        margin-top: 130px;
        .donwTitle {
          text-align: center;
          color: #000000d9;
          font-weight: 700;
          font-size: 40px;
        }
      }
      .content-list {
        width: 100%;
        height: auto;
        margin-top: 32px;
        .content-text-frame {
          width: 100%;
          height: 40px;
          line-height: 34px;
          .coin-img {
            width: 22px;
            height: 24px;
            margin-right: 8px;
          }
          .content-text {
            font-size: 28px;
            text-align: center;
            color: #000000a6;
          }
        }
        .donw-div-button-frame {
          width: 562px;
          height: 80px;
          border-radius: 80px;
          margin: auto;
          margin-top: 38px;
          background-image: linear-gradient(78deg, #fe7919 0%, #ab3fe7 100%);
          .shandian-img {
            width: 46px;
            height: 46px;
            margin-right: 10px;
          }
          .buttomText-frame {
            font-size: 32px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.donwType-frame {
  width: 626px;
  max-height: 996px;
  height: auto;
  border-radius: 50px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  background-image: linear-gradient(180deg, #d17fff 1%, #7f99ff 100%);
  padding-bottom: 40px;
  .banner-img {
    width: 100%;
    height: auto;
  }
  .detail-frame {
    width: 526px;
    height: 300px;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -10px;
    .back-img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
    }
    .detail-content-frame {
      width: 466px;
      height: 100%;
      line-height: 36px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      z-index: 2;
      color: #ffffff;
      font-size: 28px;
      text-align: center;
      font-weight: 400;
      margin: auto;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
        overflow: -moz-scrollbars-none; /* Firefox */
        -ms-overflow-style: none; /* IE 和 Edge */
      }
    }
  }
  .incentivos-frame {
    width: 526px;
    height: 82px;
    border-radius: 82px;
    background-color: #00000026;
    margin: auto;
    margin-top: 15px;
    .meiyuan-frame {
      width: 50px;
      height: 50px;
      margin-right: 16px;
    }
    .bonus-text {
      font-size: 24px;
      color: #ffffff;
      font-weight: 700;
    }
    .money-huhao {
      color: #ffaf00;
      font-weight: 700;
      margin-left: 10px;
      font-size: 32px;
    }
  }
  .button-frame {
    width: 526px;
    height: auto;
    margin: auto;
    margin-top: 30px;
    .button-left-frame {
      width: 406px;
      height: 100px;
      background-image: linear-gradient(77deg, #fe7919 0%, #ab3fe7 100%);
      border-radius: 100px;
      color: #ffffff;
      font-weight: 400;
      font-size: 28px;
      .shandian-img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }
    }
    .fpwa-frame {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #00000040;
      .fpwa-cs {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.donwPwa-frame {
  width: 100%;
  height: 810px;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  .cloture-frame {
    width: 120px;
    height: 120px;
    position: absolute;
    right: 40px;
    top: 0;
    z-index: 10;
  }
  .hometips-img {
    width: 660px;
    height: 810px;
    margin: auto;
  }
}
.Closeb-img {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -100px;
  z-index: 22;
  width: 50px;
  height: 50px;
  margin: auto;
}
</style>
